<template>
	<sw-form-frame v-model="visible" :title="formName" :type="formType">
		<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-width="80px" v-loading="loading">
			<el-row :gutter="30">
				<el-col :span="12">
					<el-form-item label="用户账号" prop="account">
						<sw-letter-input v-model="formData.account" placeholder="请输入用户账号"></sw-letter-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户昵称" prop="userName">
						<el-input v-model="formData.userName" placeholder="请输入用户昵称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户院系" prop="deptId">
						<sw-search-tree-select v-model="formData.deptId" v-bind="treeSelectConfig" :tree-data="departTree" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="出生日期" prop="birthDate">
						<el-date-picker v-model="formData.birthDate" v-bind="datePickerConfig"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户民族" prop="ethnic">
						<nation-select v-model="formData.ethnic" placeholder="请选择用户民族" style="width: 100%"></nation-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户电话" prop="phone">
						<sw-number-input v-model="formData.phone" maxLength="11" placeholder="请输入用户电话"></sw-number-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="用户性别" prop="sex">
						<el-radio-group v-model="formData.sex">
							<el-radio v-for="(item, index) in dictData['USER_SEX']" :key="index" :label="item.value">{{ item.msg }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="用户系统类型" prop="userType" label-width="108px">
						<el-select v-model="formData.userType" placeholder="请选择用户系统类型" style="width: 100%">
							<el-option label="可登录" value="1"></el-option>
							<el-option label="可调用外部接口" value="2"></el-option>
							<el-option label="可登录+可调用外部接口" value="3"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="用户类型" prop="type">
						<el-radio-group v-model="formData.type" v-removeAriaHidden>
							<el-radio v-for="(item, index) in dictData['USER_TYPE']" :key="index" :label="item.value">{{ item.msg }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<template v-if="formData.type === '1'">
					<el-col :span="12">
						<el-form-item label="班级编号" prop="classNo">
							<el-input v-model="formData.classNo"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="专业编号" prop="major">
							<el-input v-model="formData.major"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="入学年月" prop="entranceDate">
							<el-date-picker v-model="formData.entranceDate" v-bind="monthPickerConfig" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="生源地" prop="source">
							<el-input v-model="formData.source"></el-input>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<template slot="footer">
			<el-button size="medium" type="primary" @click="handleSubmitForm()">新增</el-button>
			<el-button size="medium" @click="visible = false">取消</el-button>
		</template>
	</sw-form-frame>
</template>

<script>
import { mapGetters } from 'vuex';
import formMixins from '@/mixins/formMixins';
import nationSelect from '@/components/nationSelect';
import { userDetail, addedUser, updateUser } from '@/api/system/tbSysUser';
export default {
	mixins: [formMixins],
	consts: ['DEFAULT_PASSWORD'],
	enums: ['USER_TYPE', 'USER_SEX'],
	components: { nationSelect },
	data() {
		return {
			formName: '用户',
			formRules: {
				account: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
				userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
				deptId: [{ required: true, message: '请选择用户院系', trigger: 'change' }],
				sex: [{ required: true, message: '请选择用户性别', trigger: 'change' }],
				type: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
				userType: [{ required: true, message: '请选择用户系统类型', trigger: 'change' }],
				birthDate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
			},
			datePickerConfig: {
				type: 'date',
				style: { width: '100%' },
				valueFormat: 'yyyy-MM-dd',
				placeholder: '请选择出生日期'
			},
			monthPickerConfig: {
				type: 'month',
				placeholder: '入学年月',
				style: { width: '100%' },
				valueFormat: 'yyyy-MM-dd'
			},
			treeSelectConfig: {
				filterable: true,
				style: { width: '100%' },
				placeholder: '选择用户院系',
				defaultProps: { label: 'name', children: 'childList' }
			}
		};
	},
	computed: {
		...mapGetters(['dictConst', 'departTree']),
		detailData() {
			return eval(userDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedUser : updateUser);
		},
		submitParams() {
			let params = { ...this.formData };
			params['systemKey'] = '1';
			params['picId'] = '-1';
			params['diskSpace'] = 0;
			params['password'] = this.dictData['DEFAULT_PASSWORD'];
			// params['password'] = rsa.rsaPublicData(this.dictConst['DEFAULT_PASSWORD']);
			return params;
		}
	}
};
</script>
